<template>
	<main-content>
		<view class="content-color">
			<u-form :model="formData" ref="formDataRef" label-width='auto'
				:label-style="{color: 'rgba(153, 153, 153, 1)' }">
				<view class="">
					<view class="p-t-16">
						<!-- <group-title>
						<template #icon>
							<view class="main-color">
								<u-icon name="title-icon" custom-prefix="custom-icon" />
							</view>
						</template>
						基础信息</group-title> -->
					</view>
					<view class="bg-white p-r-16 p-l-16">
						<u-form-item label="选择商户" prop="merchantId" required>
							<select-mch v-model="formData.merchantId" input-align='right' :clearable='true'
								:initParams="{ id:formData.merchantId }" :queryParams="{showRoleFlag: false}"
								@change='changeMch' />
						</u-form-item>
						<u-form-item label="通道名称" prop="channelId" required>
							<my-select clearable input-align='right' v-model="formData.channelId"
								@change="changeChannel" :api="channelApi.page" :responseAdapter="resFun" />
						</u-form-item>
						<u-form-item label="产品名称" prop="productId" required>
							<my-select clearable input-align='right' v-model="formData.productId"
								:queryParams="productParams" :api="productApi.page" labelKey='productName'
								@change='changeProductName' />
						</u-form-item>
					</view>
					<view class="p-16">
						<u-button type="primary" @click="showForm">填写进件资料</u-button>
					</view>

				</view>
			</u-form>
		</view>
	</main-content>
</template>
<script setup name='index'>
	import {
		reactive,
		ref,
		getCurrentInstance,
		computed,
		nextTick
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app'
	import {
		useCommonStore
	} from '@/stores/common.js'
	import {
		useUserStore
	} from '@/stores/user.js'
	import {
		ZZB_CHANNEL_TYPE, ///通道类型
	} from '@/common/dict.js'
	import {
		debounce,
		selectDictLabel,
		parseTime
	} from '@/common/common.js'
	import {
		registApi
	} from '@/pages-menus/common/api/regist/index.js'
	import {
		merchantApi
	} from '@/pages-menus/common/api/merchant/index.js'
	import {
		channelApi
	} from '@/pages-menus/common/api/channel/index.js'
	import {
		productApi
	} from '@/pages-menus/common/api/product/index.js'
	import myArea from '@/components/my-area/index.vue'
	import selectMch from '@/pages-menus/components/select-mch/index.vue'
	import {
		isMulPassword,
		validatePhoneNot
	} from '@/common/validate'
	const commonStore = useCommonStore()
	const {
		proxy
	} = getCurrentInstance()

	const formType = ref('add')

	const maiColor = computed(() => {
		return proxy.$System.maiColor.value
	})
	const formDataRef = ref(null)
	const rules = ref({
		merchantId: [{
			required: true,
			message: '商家 必填',
			trigger: ['change', 'blur']
		}],
		channelId: [{
			required: true,
			message: '通道名称 必填',
			trigger: ['change', 'blur']
		}],
		productId: [{
			required: true,
			message: '产品名称 必填',
			trigger: ['change', 'blur']
		}],
	})

	const initForm = {
		merchantId: undefined,
		directFlag: undefined,
		channelType: undefined,
		channelId: undefined,
		productId: undefined,
		productName: undefined,
		id: undefined,
	}
	const formData = ref({
		...initForm
	})

	// 提交
	const submit = async () => {
		let valid
		formDataRef.value.validate((val) => {
			valid = val
		})
		if (!valid) return
		let res = await registApi.insertMerchantsProduct(formData.value)
		if (res.code != 200) return
		return res
		uni.showToast({
			title: `新增成功！`,
			icon: 'success',
			duration: 2000
		});
	}

	const queryData = ref({})
	const getForm = () => {
		registApi.findOne(queryData.value).then((res) => {
			if (res.code != 200) return
			formData.value = res.data
		})
	}
	const titleMap = {
		add: '新增',
		update: '修改',
		view: '查看',
	}

	const updateForm = () => {
		formType.value = 'update'
		initFormView()
	}

	const initFormView = () => {
		getForm()
		// 动态设置标题
		uni.setNavigationBarTitle({
			title: titleMap[formType.value]
		})
	}

	// 选择商户===》
	const changeMch = (val) => {
		console.log('选择商户===>', val);
		// if (!val[0]) {
		// 	formData.value.merchantId = undefined
		// 	return
		// }
		// formData.value.merchantId = data[0].id
		formData.value.agentId = val[0].pAgentId || val[0].oAgentId
	}
	// 通道数据整理
	const resFun = (res) => {
		console.log('res========>', res);
		res.data = res.data.map((item) => {
			return {
				...item,
				name: `${item.channelName}-${selectDictLabel(ZZB_CHANNEL_TYPE, item.channelType)}`,
			}
		})
		return res
	}
	// 切换通道
	const changeChannel = (data) => {
		console.log('通道===>', data)
		formData.value.productId = undefined
		if (proxy.$System.isEmpty(data?.[0])) {
			formData.value.directFlag = undefined
			formData.value.channelType = undefined
			return
		}
		formData.value.directFlag = data[0].directFlag ? 1 : 0
		formData.value.channelType = data[0].channelType
	}
	const apiType = ref(0)
	//选择产品
	const productParams = computed(() => {
		return {
			channelType: formData.value.channelType,
			status: 1
		}
	})

	function changeProductName(data) {
		console.log('选择产品===>', data)
		apiType.value = data[0].apiType
		formData.value.productName = data[0].productName
	}

	// 跳转对应进件资料表单
	async function showForm() {
		let res = await submit()
		if (res?.code == 200) {
			let data = {
				...formData.value,
				id: res.data,
				apiType: apiType.value
			}
			if (data.channelType == 1) {
				proxy.$System.goTo('/pages-menus/pages/regist/alipay-form', {
					formType: 'add',
					rowData: {
						...data
					}
				}, {
					method: 'reLaunch'
				})
			} else if (data.channelType == 2) {
				proxy.$System.goTo('/pages-menus/pages/regist/weChat-form', {
					formType: 'add',
					rowData: {
						...data
					}
				}, {
					method: 'reLaunch'
				})
			} else if (data.channelType == 5) {
				proxy.$System.goTo('/pages-menus/pages/regist/lakala-form', {
					formType: 'add',
					rowData: {
						...data
					}
				}, {
					method: 'reLaunch'
				})
			}
		}
	}

	onLoad(async (options) => {
		formType.value = options.type ?? 'add'
		if (options.id) {
			queryData.value.id = options.id
			initFormView()
		}
	})
	onReady(() => {
		nextTick(() => {
			formDataRef.value?.setRules(rules.value);
		})
		// paging.value.reload()
	})
</script>
<style>
	page {
		background: #f6f7f8;
	}
</style>
<style lang='scss' scoped>
	.view-group {
		background-color: #fff;
	}

	.operate-box {
		position: fixed;
		z-index: 99;
		bottom: 50rpx;
	}

	.tar {
		:deep(.u-input) {
			text-align: right !important;
		}
	}
</style>